<!-- 任务执行页面 -->
<div class="tab-content" id="tasks">
    <header class="page-header">
        <h2>任务执行</h2>
        <p>让 AI 为你完成各种任务</p>
    </header>

    <div class="task-container">
        <!-- 工作路径选择 -->
        <div class="task-section">
            <h3>选择工作路径</h3>
            <div class="path-selector-group">
                <div class="path-input-wrapper">
                    <input type="text" id="work-path-input" placeholder="请选择工作文件夹" class="path-input" readonly>
                    <button class="btn-select-path" id="select-path-btn">
                        <i class="fas fa-folder-open"></i>
                        选择文件夹
                    </button>
                </div>
                <button class="btn-open-location" id="open-location-btn" disabled>
                    <i class="fas fa-external-link-alt"></i>
                    打开文件位置
                </button>
            </div>
            <div class="path-hint">
                <i class="fas fa-info-circle"></i>
                选择项目文件夹，AI 将在此目录下执行任务
            </div>
        </div>

        <!-- 任务输入和结果区域 -->
        <div class="task-main-content">
            <!-- 左侧：任务描述输入 -->
            <div class="task-input-section">
                <h3>输入任务描述</h3>
                <div class="task-input-group">
                    <textarea id="task-input" placeholder="请先选择工作路径并等待 Claude 连接成功..." rows="8" class="task-textarea"
                        disabled></textarea>

                    <div class="input-hint">
                        <i class="fas fa-keyboard"></i>
                        <span>提示：按 <kbd>Enter</kbd> 发送任务，<kbd>Shift + Enter</kbd> 换行</span>
                    </div>

                    <div class="task-controls">
                        <button class="btn-send" id="execute-task-btn" disabled>
                            <i class="fas fa-paper-plane"></i>
                            发送任务
                        </button>
                        <button class="btn-clear" id="clear-task-btn" disabled>
                            <i class="fas fa-trash"></i>
                            清空
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧：任务结果展示 -->
            <div class="task-output-section">
                <h3>任务结果</h3>
                <div class="task-result-container">
                    <div class="result-header">
                        <div class="result-status" id="result-status">
                            <i class="fas fa-circle"></i>
                            <span>等待任务</span>
                        </div>
                        <div class="result-actions" id="result-actions" style="display: none;">
                            <button class="btn-copy-result" id="copy-result-btn">
                                <i class="fas fa-copy"></i>
                                复制结果
                            </button>
                            <button class="btn-clear-result" id="clear-result-btn">
                                <i class="fas fa-trash"></i>
                                清空结果
                            </button>
                        </div>
                    </div>

                    <div id="task-output" class="output-container">
                        <div class="output-placeholder">
                            <i class="fas fa-brain"></i>
                            <p>准备就绪，请输入任务并点击发送</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <footer class="app-version-footer">
        <div class="footer-content" style="justify-content: space-between;">
            <div class="footer-left">
                <button class="cmd-mode-btn" id="code-mode-btn">
                    <i class="fas fa-code"></i>
                    命令行模式
                </button>
            </div>
            
            <div class="footer-center">
                <!-- Claude 连接状态指示器 -->
                <div class="claude-connection-status" id="claude-connection-status">
                    <div class="status-indicator" id="status-indicator" data-status="disconnected">
                        <div class="status-light"></div>
                    </div>
                    <span class="status-text" id="status-text">未连接</span>
                </div>
            </div>

            <div class="footer-right">
                <button class="cmd-mode-btn" id="history-btn">
                    <i class="fas fa-history"></i>
                    对话历史
                </button>
            </div>
        </div>
    </footer>

    <!-- 对话历史侧边栏 -->
    <div class="history-sidebar" id="history-sidebar">
        <div class="sidebar-header">
            <h3>对话历史</h3>
            <button class="btn-close-sidebar" id="close-history-btn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="sidebar-content" id="history-content">
            <div class="history-placeholder">
                <i class="fas fa-history"></i>
                <p>暂无对话记录</p>
            </div>
        </div>
    </div>

    <!-- 侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>
</div>